<template>
	<view class="my_info">
		<!--出行人-->
		<view class="add-address">
			<view class="address-defalut-wrap" v-if="travelers.length > 0">
				<view class="info-item" v-for="(item,index) in travelers">
					<view>
						<view class="user mb10">
							<text class="name f32" style="font-weight: bold">{{item.name}}</text>
							<text class="tel f26">{{item.mobile}}</text>
						</view>
						<view class="info">
							<text class="tel f26">身份证号：{{item.id_card}}</text>
						</view>
					</view>
					<image class="addree_icon" src="/static/images/cart/delete.png" mode="" @click="deleteItem(index)"></image>
				</view>
			</view>
			<view class="new-add" @click="addTravelerFun()">
				<view class="add-block">
					<image class="addree_icon" src="/static/images/order/add.png" mode=""></image>
					<text>添加出行人</text>
				</view>
			</view>
		</view>
		
		<u-popup mode="bottom" closeable="true" border-radius="30" v-model="addTraveler">
			<view class="add-traveler">
				<view>添加出行人</view>
				<view class="info-block name-block">
					<view class="title">姓名</view>
					<u-input v-model="info.name" type="text" placeholder="请输入姓名" />
				</view>
				<view class="info-block phone-block">
					<view class="title">手机号</view>
					<u-input v-model="info.mobile" type="text" placeholder="请输入手机号" />
				</view>
				<view class="info-block idcard-block">
					<view class="title">身份证号</view>
					<u-input v-model="info.id_card" type="text" placeholder="请输入身份证号" />
				</view>
			</view>
			<view class="add" @click="add()">添加</view>
		</u-popup>
	</view>
</template>

<script>
	import utils from '@/common/utils.js';
	export default {
		data() {
			return {
				addTraveler: false,
				info: {
					name: '',
					mobile: '',
					id_card: ''
				}
			}
		},
		props: ['travelers'],
		onLoad() {

		},
		mounted() {

		},
		methods: {
			/*添加出行人*/
			addTravelerFun() {
				this.addTraveler = true;
			},
			add() {
				if (this.info.name == '' || this.info.mobile == '' || this.info.id_card == '') {
					uni.showToast({
						title: '请填写出行人信息',
						icon: 'none'
					})
					return;
				}
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.info.mobile)) {
					console.log(this.info.mobile)
					uni.showToast({
						title: '手机有误,请重填！',
						icon: 'none'
					});
					return;
				}
				if (!utils.isVail(this.info.id_card)) {
					uni.showToast({
						title: '请输入正确的身份证号码！',
						icon: 'none'
					});
					return;
				}
				this.travelers.push(this.info)
				this.$emit('addTravelers', this.travelers)
				this.addTraveler = false;
				this.info = {
					name: '',
					mobile: '',
					id_card: ''
				}
			},
			deleteItem(index) {
				console.log(index);
				this.travelers.splice(index, 1);
				this.$emit('addTravelers', this.travelers)
			}
		}
	}
</script>

<style lang="scss">
	.info {
		font-size: 33rpx;
		line-height: 43rpx;
	}

	.add-addr {
		display: flex;
		align-items: center;
	}

	.tel {
		font-size: 27rpx;
		color: #999999;
	}

	.choose-address {
		width: 88rpx;
		height: 88rpx;
		margin-right: 35rpx;
	}

	.icon-dizhi {
		margin-right: 25rpx;
		color: #ff6633;
		font-size: 60rpx;
	}

	.addree_icon {
		width: 32rpx;
		height: 32rpx;
	}

	.my_info {
		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #F2F2F2;
			padding-bottom: 10px;
		}
	}
	
	.add-address {
		width: 92%;
		margin: 30rpx;
		background: #ffffff;
		border-radius: 15rpx;
		
		.address-defalut-wrap {
			padding: 0 30rpx 20rpx!important;
		}
	}
	
	.new-add {
		display: flex;
		.add-block {
			margin: 0 auto;
			display: flex;
			align-items: center;
			.addree_icon {
				margin-right: 16rpx;
			}
			text {
				font-weight: 500;
				font-size: 32rpx;
			}
		}
	}
	
	.add-traveler {
		padding: 32rpx 32rpx 156rpx;
		text-align: center;
		.name-block {
			margin-top: 40rpx;
		}
		.info-block {
			display: flex;
			align-items: center;
			height: 88rpx;
			.title {
				width: 200rpx;
				text-align: left;
			}
			u-input {
				width: 100%;
				border-bottom: 1rpx solid #D9D9D9;
			}
		}
	}
	.add {
		position: absolute;
		bottom: 16rpx;
		width: 690rpx;
		height: 80rpx;
		background: #F63E36;
		opacity: 1;
		border-radius: 56rpx;
		color: #ffffff;
		text-align: center;
		line-height: 80rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
</style>
